import axios from 'axios';
<template>
  <div class="group">
    <div class="groupimg"></div>
    <div class="grouptop">
      <van-icon
        name="arrow-left"
        color="#fff"
        class="grouptop_icon"
        @click="handleClick()"
      />
    </div>
    <div class="groupconter">
      <div class="groupconter_top">
        <div class="groupconter_top_title">正在进行中</div>
        <div>
          <img
            :src="this.GroupListOne[0].img"
            alt=""
            class="groupconter_top_img"
          />
        </div>
        <div class="groupconter_top_titletwo">
          已有
          <span style="color: red">{{ this.GroupListOne[0].joinnum }}</span>
          人参团，仅差<span style="color: red">
            {{ this.GroupListOne[0].residuenum }} </span
          >人
        </div>
        <div class="groupconter_top_titletheer" @click="handleDetele()">
          查看详情
        </div>
      </div>
      <dl
        v-for="(item, index) in GroupList"
        :key="index"
        class="groupconter_bottom"
      >
        <dd class="groupconter_bottom_img"><img :src="item.img" alt="" /></dd>
        <dd class="groupconter_bottom_title">{{ item.title }}</dd>
        <dd class="groupconter_bottom_text">
          {{ item.joinnum + item.residuenum }}人团
        </dd>
        <dd class="groupconter_bottom_discountprice">
          ￥{{ item.discountprice }}
          <div class="groupconter_bottom_price">￥{{ item.price }}</div>
        </dd>
        <!-- <dd class="groupconter_bottom_price">￥{{ item.price }}</dd> -->
        <dd class="groupconter_bottom_go" @click="handleShop(item)">
          去拼团<van-icon name="arrow" color="#fff" />
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    axios.get("/getGroup").then((res) => {
      this.GroupList = res.data.list;
    }),
      axios.get("/getGroupOne").then((res) => {
        this.GroupListOne = res.data.list;
      });
  },
  data() {
    return {
      GroupList: [],
      GroupListOne: [],
    };
  },
  methods: {
    handleClick() {
      this.$router.go(-1);
    },
    handleDetele() {
      const v = this.GroupListOne;
      this.$router.push({ path: "/groupDetele", query: { v } });
    },
    handleShop(v) {
      this.$router.push({ path: "/groupShop", query: { v } });
    },
  },
};
</script>

<style lang="scss" scoped>
.group {
  width: 100%;
  height: 100%;
}
.groupimg {
  background: url("../../images/group.png") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
.grouptop {
  width: 100%;
  height: 50px;
}
.grouptop_icon {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.groupconter {
  width: 95%;
  height: 500px;
  position: fixed;
  top: 190px;
  left: 2.5%;
}
.groupconter_top {
  width: 100%;
  height: 220px;
  background: #f2f2f2;
  border-radius: 20px;
  position: relative;
}
.groupconter_top_title {
  width: 100%;
  height: 40px;
  background: #febf12;
  color: #fff;
  line-height: 40px;
  text-align: center;
  border-radius: 20px 20px 0px 0px;
}
.groupconter_top_titletwo {
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  top: 60px;
  left: 150px;
}
.groupconter_top_img {
  width: 130px;
  position: absolute;
  top: 60px;
  left: 20px;
}
.groupconter_top_titletheer {
  width: 140px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: 150px;
  left: 170px;
  border-radius: 30px;
  background: #eb352a;
  color: #fff;
}
.groupconter_bottom {
  width: 100%;
  height: 120px;
  background: #f2f2f2;
  border-radius: 4px;
  position: relative;
  margin-top: 20px;
}
.groupconter_bottom_img {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 10px;
}
.groupconter_bottom_title {
  width: 200px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  left: 120px;
  top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.groupconter_bottom_text {
  width: 50px;
  height: 24px;
  line-height: 24px;
  position: absolute;
  left: 120px;
  top: 46px;
  border: 2px solid #e78e7b;
  color: #e78e7b;
}
.groupconter_bottom_discountprice {
  width: 100px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  left: 120px;
  top: 82px;
  display: flex;
  font-size: 22px;
  font-weight: bold;
}
.groupconter_bottom_price {
  // width: 50px;
  // height: 24px;
  // line-height: 24px;
  font-size: 14px;
  font-weight: 100;
  color: #ccc;
  text-decoration: line-through;
  margin-top: 3px;
  margin-left: 5px;
}
.groupconter_bottom_go {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  position: absolute;
  left: 260px;
  top: 82px;
  background: #ef3126;
  font-size: 14px;
}
</style>